<template>
	<view>
		<rf-topSearch headNavigationType="2" @fan="fan" ></rf-topSearch>
	
		<view class="center">
			<view class="Normal">
				<view class="non">
					<view class="top">
					<div class="text" v-if="shopList.length !=0">
						<view class="img">
							<image :src="shopList.member.head_portrait" mode=""></image>
						</view>
						<view class="name">
							我是{{shopList.member.realname}}
						</view>
						
					</div>
					</view>
					<view class="foot1">
						<view class="tpp">
							我快要砍成了,快来帮我砍价了
						</view>
						<view class="text">
							已砍 <span class="sp1">{{(dataList.activity_money - shopList.deal_money).toFixed(2)}}元,</span> 只差<span class="sp2">{{(( +shopList.deal_money)*100/+dataList.activity_money).toFixed(2)}}%</span> 
						</view>
						<view class="tiao">
							<view class="tiao1" :style="{'width': 100-(( +shopList.deal_money)*100/+dataList.activity_money).toFixed(2)+'%'}" ></view>
						</view>
						<view class="tpp1">
							快帮好友砍一刀吧！
						</view>
						<view class="img11">
							<image src="../../static/zhibo/cs1.png" mode=""></image>
						</view>
						<div class="again" @click="submitOrder()" v-if="isBargain">
							帮好友砍一刀
						</div>
						<div class="again" @click="goBargain()" v-else="">
							我也要免费拿
						</div>
					</view>
				</view>
				<view class="non1">
					<view class="top">
						<view class="jilu">
							<image src="../../static/jilu.png" mode=""></image>
						</view>
						<view class="title">
							砍价记录
						</view>
						<view class="jilu1">
							<image src="../../static/jilu.png" mode=""></image>
						</view>
					</view>
					<view class="foot1" v-if="shopList.length!=0">
						<view class="text">
							<view class="img">
								<image :src="shopList.member.head_portrait" mode=""></image>
							</view>
							<view class="name">
								{{shopList.member.realname}}
							</view>
							<view class="img1">
								<image src="../../static/kjsp.png" mode=""></image>
							</view>
							<view class="cont">
								砍了{{shopList.bargain_money}}元
							</view>
						</view>
					</view>
					<view class="foot1" v-for="(item,index) in bargainList" :key="index">
						<view class="text">
							<view class="img">
								<image :src="item.member.head_portrait" mode=""></image>
							</view>
							<view class="name">
								{{item.member.realname}}
							</view>
							<view class="img1">
								<image src="../../static/kjsp.png" mode=""></image>
							</view>
							<view class="cont">
								砍了{{item.bargain_money}}元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { bargainHelp , bargainView} from "@/api/product";
	import topSearch from "@/components/rf-topSearch/rf-topSearch"
	export default {
		components:{
			topSearch
		},
		data() {
			return {
				  isShow:false,
				  dataList:[],
				  shopList:[],
				  bargainList:[],
				  isBargain:true,
			};
		},
		onLoad(option) {
			this.bargain = option.id;
			this.token = uni.getStorageSync('accessToken') || undefined
			if (!this.token) {
				uni.showModal({
					content: '你未登录，是否跳转登录页面？',
					success: (confirmRes) => {
						if (confirmRes.confirm) {
							uni.clearStorage();
							uni.navigateTo({
								url: '/pages/public/login?id='+option.id
							});
						}
					}
				});
				return;
			}
			this.initData();
		},
		methods:{
			fan() {
				uni.switchTab({
					url: `/pages/index/index`
				})
			},
			goBargain() {
				uni.navigateTo({
					url: `/pages/bargain/bargain`
				})
			},
			submitOrder() {
				this.$get(`${bargainHelp}`, {id:this.bargain}).then(r => {
					console.log(r)
					this.$api.msg('砍价成功');
					
					this.initData()
					this.isBargain = false
				}).catch((err) => {
					console.log(err)
					this.isBargain = false
				});
			},
			initData(){
				this.$get(`${bargainView}`, {id:this.bargain}).then(r => {
					console.log(r)
					this.dataList = r.data.bargainConfig
					this.shopList = r.data.bargaining
					this.bargainList = r.data.bargainList
				}).catch((err) => {
					console.log(err)
				});
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>

	//砍价进行
	.Normal {
		// margin-top: 30upx;
		// margin-left: 30upx;
		width: 100%;
		// height: 1000upx;
		padding: 30upx;
		background-color: #E04131;
		.non1 {
			width: 100%;
			// height: 400upx;
			background-color: #FFFFFF ;
			border-radius: 12px;
			margin-bottom: 30upx;
			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background:rgba(255,116,99,1);
				border-radius:12px 12px 0 0;
					.jilu {
						position: absolute;
						display: inline-block;
						top: 30upx;
						left: 200upx;
						width: 28upx;
						height: 30upx;
						image {
							width: 100%;
							height: 100%;
							}
					}
					.title {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						font-size: 32upx;
						display: inline-block;
						color: #FFFFFF;
					}
					.jilu1 {
						position: absolute;
						display: inline-block;
						top: 30upx;
						left: 460upx;
						width: 28upx;
						height: 30upx;
						image {
							width: 100%;
							height: 100%;
							}
					}
				}
			.foot1 {
				width: 100%;
				// height: 300upx;
			
				.text {
					position: relative;
					width: 100%;
					height: 100upx;
					// background-color: #FF0000;
					.img {
						position: absolute;
						top: 20upx;
						left: 20upx;
						width: 68upx;
						height: 68upx;
						line-height: 100upx;
						border-radius: 100%;
						image {
							border-radius: 100%;
							width: 100%;
							height: 100%;
						}
					}
					.img1 {
						position: absolute;
						top: 15upx;
						left: 420upx;
						width: 46upx;
						height: 46upx;
						line-height: 100upx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.name {
						position: absolute;
						letter-spacing:1px;
						top: 26upx;
						left: 120upx;
						max-width: 240upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
						color: #515151;
					}
					.cont {
						position: absolute;
						top: 22upx;
						left: 490upx;
						color: #FF0000;
						font-size: 30upx;
					}
				}
			}
	
		}
		.non {
			width: 100%;
			height: 500upx;
			background-color: #FFFFFF ;
			border-radius: 12px;
			margin-bottom: 30upx;
			.foot1 {
				width: 100%;
				height: 400upx;
				position: relative;
				.tpp {
					color: 	#FF0000;
					position: absolute;
					left: 130upx;
					top: 10upx;
					font-size: 32upx;
					letter-spacing:1px;
					font-weight: bolder;
				}
				.tpp1 {
					position: absolute;
					bottom: 150upx;
					left: 240upx;
					font-size: 24upx;
				}
				.img11 {
					width: 180upx;
					height: 180upx;
					left: 30upx;
					top: 80upx;
					position: absolute;
					background-color: #FFE6E6;
					image {
						position: absolute;
						left: 50upx;
						top: 20upx;
						width: 100upx;
						height: 160upx;
					}
				}
				.again {
					position: absolute;
					width: 470upx;
					height: 70upx;
					left: 100upx;
					bottom: 30upx;
					background:linear-gradient(90deg,rgba(255,48,48,1) 0%,rgba(255,0,0,1) 100%);
					border-radius:30px;
					color: #FFFFFF;
					text-align: center;
					line-height: 70upx;
				}
				
			
				.text {
					  position: absolute;
					  left: 234upx;
					  top: 90upx;
					  // margin-top: 50upx;
					  color: #000000;
			     	  font-size: 30upx;
					  float: right;
					  span {
							  margin-left: 7upx;
							  margin-right: 7upx;
							  color: #FF0000;
							  font-weight: bolder;
						  }
						
				}
				.tiao {
						  position: absolute;
						  top: 160upx;
						  left: 230upx;
						  width: 380upx;
						  height: 20upx;
						  border-radius: 10px;
						  background-color: #FFB6B6;
						  .tiao1 {
							  width: 360upx;
							  height: 100%;
							  border-radius: 10px;
							  background-color: #E00000;
						  }
				}
			}
			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background:rgba(255,93,93,1);
				border-radius:12px 12px 0 0;
				.text {
					position: relative;
					width: 100%;
					height: 100upx;
					// background-color: #FF0000;
					.img {
						position: absolute;
						top: 20upx;
						left: 20upx;
						width: 68upx;
						height: 68upx;
						line-height: 100upx;
						border-radius: 100%;
						image {
							border-radius: 100%;
							width: 100%;
							height: 100%;
						}
					}
					
					.name {
						position: absolute;
						letter-spacing:1px;
						top: 26upx;
						left: 120upx;
						max-width: 240upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
						color: #FFFFFF;
					}
				
				}
			}
		}
	}
	

</style>
